<template>
    <div class="position">
      <span class="iconfont position__icon">&#xe619;</span>
      成都东软学院三栋2101
      <span class="iconfont position__notice">&#xe672;</span>
    </div>

    <div class="search">
      <span class="iconfont">&#xe65c;</span>
      <!-- <span class="search__text">山姆会员商店优惠商品</span> -->
      <input type="text" placeholder="山姆会员商店优惠商品" class="search_form-control"/>
    </div>

    <div class="banner">
      <img class="banner__img" src="http://www.dell-lee.com/imgs/vue3/banner.jpg" alt="">
    </div>

    <div class="icons">
      <div class="icons__item"
            v-for="item in iconsList"
            :key="item.desc"
      >
        <img class="icons__item__img" 
        :src="`http://www.dell-lee.com/imgs/vue3/${item.imgName}.png`"/>
        <p class="icons__item__desc">{{item.desc}}</p>
      </div>
           
    </div>
    <div class="gap"></div>
</template>

<script>
export default {
    name:'StaticPart',
    setup(){
        const iconsList=[
            {imgName:"超市",desc:"超市便利"},
            {imgName:"菜市场",desc:"菜市场"},
            {imgName:"水果店",desc:"水果店"},
            {imgName:"鲜花",desc:"鲜花绿植"},
            {imgName:"医药健康",desc:"医药健康"},
            {imgName:"家居",desc:"家居时尚"},
            {imgName:"蛋糕",desc:"烘培蛋糕"},
            {imgName:"签到",desc:"签到"},
            {imgName:"大牌免运",desc:"大牌免运"},
            {imgName:"红包",desc:"红包套餐"}
        ]
        return{iconsList}
    }
}
</script>

<style lang="scss" scoped>
@import '../../style/viriables.scss';
@import '../../style/mixins.scss';
.position{
  position: relative;
  padding: .16rem .24rem .16rem 0;
  line-height: .22rem;
  font-size: .16rem;
  color: $content-fontcolor;
  @include ellipsis;
  //优先级更高
  .position__icon{
    position: relative;
    top:.01rem;
    font-size: .2rem;
  }
  .position__notice{
    position: absolute;
    font-size: .2rem;
    right: 0;
    top:.17rem;
  }
}

.search{
  margin-bottom: .12rem;
  line-height: .32rem;
  background: $search-bgColor;
  color: $search-fontColor;
  border-radius: .16rem;
  .iconfont{
    position: relative;
    top: .02rem;
    left: .05rem;
    display: inline-block;
    padding: 0 .1rem 0 .12rem;
    font-size: .2rem;
  }
  &__text{
    font-size: .14rem;
    display: inline-block;
  }
  &_form-control {
    border: 0px;
    outline: none;
    width: 80%;
    background: #f5f5f5;
    color: #b7b7b7;
    font-size: 14px;
  }
  
}
.banner{
  //防止抖动 图片没加载出来的时候 撑开盒子 先占位置
  height: 0;
  overflow: hidden;
  padding-bottom: 25.4%;
  &__img{
    width: 100%;
  }
}
.icons{
  display: flex;
  flex-wrap: wrap;
  margin-top: .16rem;
  &__item{
    width: 20%;
    &__img{
      //图片居中
      display: block;
      width: 0.4rem;
      height: 0.4rem;
      margin:0 auto;
    }
    &__desc{
      margin: .06rem 0 .16rem 0;
      text-align: center;
      color: $content-fontcolor;
    }
  }
 
}
.gap{
  margin: 0 -.18rem;
  height: 0.1rem;
  background:$content-bgColor ;
}
</style>

